<section>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-sm-12">
                <article>

                    <div class="hidden-md hidden-lg sec-nav">
                        <h2>Build-in Languages</h2>
                        <p>

                        <?php
                        foreach ($languageExamples as $l){
                            echo '<a class="btn btn-primary btn-sm" href="Language.', $l, '.html">', $l, '</a>';
                        }
                        ?>
                        </p>
                    </div>

                    <h2><?php echo $currentLanguage; ?></h2>

                    <div class="input-group">
                        <span class="input-group-addon"><strong>Select Theme</strong></span>
                        <select id="ThemeChooser" class="form-control">
                            <?php
                            foreach ($themes as $t){
                                echo '<option value="', strtolower($t), '">', $t, '</option>';
                            }
                            ?>
                        </select>
                    </div>

                    <script type="text/javascript">
                        window.addEvent('domready', function(){
                            var currentThemeBase = 'enlighterEnlighterJS';

                            document.id('ThemeChooser').addEvent('change', function(){
                                // get container
                                var container = document.getElements('.EnlighterJS');
                                var wrapper = document.getElements('.EnlighterJSWrapper');

                                container.removeClass(currentThemeBase);
                                wrapper.removeClass(currentThemeBase + 'Wrapper');

                                // generate theme name
                                currentThemeBase = this.value.toLowerCase() + 'EnlighterJS';

                                // set new theme
                                container.addClass(currentThemeBase);
                                wrapper.addClass(currentThemeBase + 'Wrapper');
                            }).fireEvent('change');
                        });
                    </script>

                    <hr />

                    <?php include('Resources/TestcaseData/'.strtolower($currentLanguage).'.html'); ?>
                </article>

            </div>

            <div class="col-md-2 hidden-xs hidden-sm">
                <h4>Build-in Languages</h4>
                <ul id="content-nav" data-nav-static="true">
                    <?php
                    foreach ($languageExamples as $l){
                        echo '<li class="', ($l == $currentLanguage) ? 'spyActive': '', '"><a href="Language.', $l, '.html">', $l, '</a></li>';
                    }
                    ?>
                </ul>

                <div id="ToTop">
                    <a href="#" class="glyphicon glyphicon-upload" title="Scroll To Top"></a>
                </div>
            </div>
        </div>
    </div>
</section>